<template>
  <div id="cesiumContainer">

<!-- <el-button  @click="test">
  lallallla
</el-button> -->

  </div>

</template>


<script>

import * as Cesium from 'cesium'

export default {
  name: 'Index',
  computed: {

  },

  components: {},

  data() {
    return {
      // 版本号
      version: '3.8.7',
      responseData: '',
      input: '',
      value: true,
      region_switch: false,
      region_x1: '',
      region_y1: '',
      region_x2: '',
      region_y2: '',
      clickCount: '0',
      interference_switch: false,

      viewer: null,

      // 控制卫星是否显示
      dataSimulationBool: true,

      // 控制参数表单显示
      setParaBool: false,

      // 存储卫星模拟轨道数据
      satelliteDataSource: null,

      // 卫星场景
      satelliteScene: null,
    }

  },
  async mounted() {
    await this.initCesium()
    // 卫星加载
    // this.getSimulationData()

    // 等待 2 秒
    await new Promise(resolve => setTimeout(resolve, 2000));
    this.viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(113,14,4500000),
        orientation :{
            heading : 6,
            pitch : -1,
            roll : 0                           // default value
        }
      });
  },

  activated() {

  },

  methods: {
    
    // 获取相机位置，姿态等
    getcameraPosInfo() {
      // 获取 相机姿态信息
      var head = this.viewer.scene.camera.heading
      var pitch = this.viewer.scene.camera.pitch
      var roll = this.viewer.scene.camera.roll
      var info = { 'head': head, 'pitch': pitch, 'roll': roll };
      // 获取位置 wgs84的地心坐标系，x,y坐标值以弧度来表示
      var position = this.viewer.scene.camera.positionCartographic //with longitude and latitude expressed in radians and height in meters.
      //以下方式也可以获取相机位置只是返回的坐标系不一样
      // var position = viewer.scene.camera.position //cartesian3 空间直角坐标系
      // var ellipsoid = scene.globe.ellipsoid;
      // var position =ellipsoid.cartesianToCartographic(viewer.scene.camera.position)//
      // 弧度转经纬度
      var longitude = Cesium.Math.toDegrees(position.longitude).toFixed(6)
      var latitude = Cesium.Math.toDegrees(position.latitude).toFixed(6)
      var height = position.height
      return { lng: longitude, lat: latitude, h: height, mat: info }
    },

    async initCesium() {
      
      this.viewer = new Cesium.Viewer('cesiumContainer', {

        baseLayer: new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
          //23级瓦片的高精度全球影像
          //url:'http://192.168.8.244:30019/tile-server/v1?Layer=bing_map&TileMatrix={z}&TileCol={x}&TileRow={y}'
          //高德
          //url:'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
          //谷歌
          url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile'
        })),

        //界面右下角全屏按钮
        fullscreenButton: false,
        //界面左下角控制动画的面板
        animation: false,
        //点击地球后的信息框
        infoBox: false,
        //右上角 Help
        navigationHelpButton: false,
        //是否显示地名查找控件
        geocoder: false,
        //是否显示时间线控件
        timeline: true,
        //是否显示图层选择控件
        baseLayerPicker: true,
        //右上角初始化地球位置按钮
        homeButton: false,
        //右上角 2D/3D切换
        sceneModePicker: true,
        shouldAnimate: true,
        //隐藏双击entity时候的聚焦框
        selectionIndicator: false,
        //去除地球外侧光圈
        skyAtmosphere: false
      })

      /**
       * 设置默认图层数据
       * 0:Bing Maps Aerial
       * 1:Bing Maps Aerial with Labels
       * 2:Bing Maps Roads
       * 3:ESRI World Imagery
       * 4:ESRI World Street Map
       * 5:ESRI National Geographic
       * 6:Open­Street­Map
       * 7:Stamen Watercolor
       * 8:Stamen Toner
       * 9:Sentinel-2
       * 10:Blue Marble
       * 11:Earth at night
       * 12:Natural Earth II
       */
      this.viewer.baseLayerPicker.viewModel.selectedImagery = this.viewer.baseLayerPicker.viewModel.imageryProviderViewModels[3]

      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
    },
  }

}

</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 95vh;
}

.cesium-widget-credits {
  /* 去除logo */
  display: none !important;
}
</style>
